<template>
    <category @search="search" @handle="setCategoryID" />
    <div class="list">
        <article-item v-for="(item, idx) in listData" :key="idx" :inst="item" />
    </div>
    <div class="page">
        <pagination
            v-model:current="pn"
            :total="total"
            @change="changePage"
            :pageSize="ps"
            :hideOnSinglePage="true"
        />
    </div>
</template>

<script setup>
import articleItem from "@/components/articleItem.vue";
import category from "@/components/category.vue";
import config from "@/config.js";
import { get } from "@/util/request.js";
import { Pagination } from "ant-design-vue";
import { onMounted, ref } from "vue";

const categoryID = ref(0);
const pn = ref(1);
const listData = ref([]);
const ps = ref(config.ps);
const total = ref(0);

onMounted(() => {
    getData();
});

const getData = () => {
    const url =
        "/article/get?cid=" +
        categoryID.value +
        "&pn=" +
        pn.value +
        "&ps=" +
        config.ps;
    get(url).then((resp) => {
        listData.value = resp.insts;
        total.value = resp.instNum;
    });
};

const changePage = (p) => {
    pn.value = p;
    getData();
};

const setCategoryID = (id) => {
    categoryID.value = id;
    pn.value = 1;
    getData();
};

const search = (result) => {
    listData.value = result;
    total.value = 1;
};
</script>
